<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">111</div>
    <div>222</div>
    <div class="item">33</div>
    <div class="item">44</div>
    <script src=" https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        /* 
        
            jquery 选择器
            $('#box')
                参数是css选择器
                返回值是一个伪数组--伪数组存放的是dom元素

        */

        // let box =document.querySelector("#box");
        // box.nextElementSibling
        // box.previousElementSibling

        // 下一个兄弟元素
        // console.log($('#box').next());
        // 下面所有的兄弟
        console.log($('#box').nextAll());
        // 上一个兄弟元素
        // console.log($('.item:eq(0)').prev());

        // 上面所有的兄弟
        console.log($('.item:eq(0)').prevAll());


        // 选中元素中 第一个
        console.log($('div').first());

        // 这些筛选方法 返回都是伪数组
        // $('div').first().css('color', 'red')

        // 选中元素中 最后一个

        console.log($('div').last());


        // document.querySelectorAll('div')[0]

        // 选中元素中 第一个
        console.log($('div').eq(0));
        // 选中元素中 第二个
        console.log($('div').eq(1));



        // document.body.parentElement
        // 父元素
        console.log($('#box').parent());
        // 所有 父代 元素
        console.log($('#box').parents());


        // 子元素
        // document.body.children
        console.log($('body').children());



        // 除了自己以外的所有兄弟元素
        // 获取33div 所有兄弟--包含上面和下面
        console.log($('.item').first().siblings());


        // 找到 body标签下所有后代元素中所有标签为div  的元素
        console.log($('body').find('div'));
        // 找到 body标签下所有后代元素中所有类名为 item 的元素
        console.log($('body').find('.item'));
        console.log($('body .item'));
        console.log($('body div'));











    </script>

</body>

</html>